<template>
    <div>
        <div ref="chart" class="chart"></div>
    </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
const chart = ref();
const titleData = ref(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]);
const valueData = ref([5, 20, 36, 10, 10, 20]);
function initChart() {
    const myChart = echarts.init(chart.value);
    myChart.setOption({
        title: {
            text: "月销售统计",
        },
        tooltip: {},
        xAxis: {
            data: titleData.value,
        },
        yAxis: {},
        series: [
            {
                name: "销量",
                type: "bar",
                data: valueData.value,
            },
        ],
    });
}
onMounted(() => {
    initChart();
});
</script>
<style scoped>
.chart {
    width: 100%;
    height: 400px;
}
</style>
